<template>
    <div class="question-container">
        <div>
            <header class="modify-header">
                <div class="left">
                    <span class="arrow" @click="$router.back()"><i class="el-icon-arrow-left" />返回</span>
                    <span>|</span>
                    <span>题库管理</span>
                </div>
                <div class="right">
                    课程管理系统
                </div>
            </header>
        </div>
        <div class="tableBar">
            <label style="margin-right: 10px">题目对应课程：</label>
            <el-select v-model="value" filterable placeholder="题目对应课程">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-button class="normal-btn continue" @click="getQuestion()" icon="el-icon-search">
                <span style="font-weight: bold;">查询</span>
            </el-button>
            <div class="tableLab">
                <el-button type="primary" style="margin-left: 15px; display: inline-block;" @click="addQuestion()">
                    + 新建题目
                </el-button>
            </div>
        </div>
        <div class="eltable">
            <el-table :data="tableData" stripe class="data_table" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="id" label="题目编号" >
                </el-table-column>
                <el-table-column prop="questionContent" label="题目内容">
                    <template slot-scope="scope">
                        <span v-if="!scope.row.questionContent">无</span>
                        <el-link v-else :href="scope.row.questionContent" type="primary" target="_blank"
                            class="underline-link"><i class="el-icon-folder-opened" style="font-size: 1.5em"></i></el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="questionTopicIntroduction" label="前言">
                </el-table-column>
                <el-table-column prop="answer" label="参考答案">
                    <template slot-scope="scope">
                        <span v-if="!scope.row.answer">无</span>
                        <el-link v-else :href="scope.row.answer" type="primary" target="_blank"
                            class="underline-link"><i class="el-icon-folder-opened" style="font-size: 1.5em"></i></el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="questionType" label="题目类型">
                </el-table-column>
                <el-table-column prop="questionCourse" label="题目对应课程">
                </el-table-column>
                <el-table-column label="操作" align="center" style="width: 250px;">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" class="blueBug"
                            @click="editHandle(scope.row.id, scope.row)">
                            编辑
                        </el-button>
                        <el-button type="text" size="small" class="delBut" @click="deleteHandle(scope.row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="tablePage.pageNum"
                :page-size="tablePage.pageSize" :page-sizes="pageSizes" :total="tablePage.total"
                @size-change="handleSizeChange" @current-change="handlePageChange" />
        </div>
    </div>
</template>

<script>
import { getQuestionAPI, deleteQuestionAPI } from "@/api/question";
export default {
    name: 'question',
    data() {
        return {
            courseId: '',
            tablePage: {
                pageNum: 1, // 第几页
                pageSize: 10, // 每页多少条
                total: 100 // 总记录数
            },
            pageSizes: [5, 10, 20, 30],
            form: {
                name: ''
            },
            tableData: [],
            selectedRows: [], // 用于存储选中的行数据 存储发布作业数组
            // //题目类型选项
            // typeOptions: [
            //     {
            //         value: '',
            //         label: '全部'
            //     }, {
            //         value: '简答题',
            //         label: '简答题'
            //     }, {
            //         value: '设计题',
            //         label: '设计题'
            //     }, {
            //         value: '其他',
            //         label: '其他'
            //     }],
            //题目对应课程
            options: [
                {
                    value: '',
                    label: '全部'
                }, {
                    value: '计算机类',
                    label: '计算机类'
                }, {
                    value: '管理类',
                    label: '管理类'
                }, {
                    value: '理工类',
                    label: '理工类'
                }, {
                    value: '艺术类',
                    label: '艺术类'
                }, {
                    value: '其他',
                    label: '其他'
                }],
            value: ''
        }
    },
    mounted() {
        this.courseId = this.$route.query.courseId
        this.getQuestion()
    },
    methods: {
        //添加问题
        addQuestion() {
            this.$router.push({ path: '/question/addQuestion', query: { questionId: '', question: {} } });
        },
        handlePageChange(currentPage) {
            this.tablePage.pageNum = currentPage
            // 在此刷新数据
            this.getQuestion()
        },
        handleSizeChange(pageSize) {
            this.tablePage.pageSize = pageSize
            // 在此刷新数据
            this.getQuestion()
        },
        //获取问题表
        getQuestion() {
            // console.log(this.tablePage.pageNum, this.tablePage.pageSize, this.value);
            getQuestionAPI(this.tablePage.pageNum, this.tablePage.pageSize, this.value).then((res) => {
                this.tableData = res.data.records  //分页结果列表
                this.tablePage.total = res.data.total //总页数
            })
        },
        //编辑按钮
        editHandle(questionId, question) {
            this.$router.push({ path: '/question/addQuestion', query: { questionId: questionId, question: question } });
        },
        //删除按钮
        deleteHandle(questionId) {
            this.$confirm('确认删除该题目, 是否继续?', '注意！！！删除了题目的话，学生提交的作业中包含该题目的信息也会被一并删除。确定删除', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // this.deleteQuestion(questionId)
                deleteQuestionAPI(questionId).then(res => {
                    if (res.code === 200) {
                        this.$message.success('删除题目成功！')
                        this.getQuestion()
                    } else {
                        this.$message.error('删除题目失败！')
                    }
                }).catch(error => {
                    this.$message.error('删除出错了！')
                    console.log(error);
                })
            })
        },
        //批量选中
        handleSelectionChange(val) {
            // val 是一个数组，包含了所有被选中的行的数据
            this.selectedRows = val; // 将选中的行数据存储到data属性中
            console.log(val)
        }
        //批量发布作业

    }
}
</script>

<style lang="scss" scoped>
.question-container {
    // margin-left: 50px;
    margin-right: 50px;

    .modify-header {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        height: 64px;
        line-height: 64px;
        font-size: 16px;
        font-weight: bold;
        background-color: #fff;

        .left {
            span {
                margin-right: 4px;
            }

            .arrow {
                cursor: pointer;
            }
        }

        .right {
            text-align: right;
        }
    }

    .tableBar {
        display: flex;
        justify-content: right;
        margin: 10;
    }

    .eltable {
        margin-left: 2%;
        margin-right: 2%;
    }

    .normal-btn continue {
        margin-left: 10px;
        background-color: aquamarine;

    }

    .tableLab {
        margin-left: 0;
    }

    .pagination {
        display: flex;
        justify-content: right;
        margin-right: 2%;
    }
}

// 下划线
.underline-link {
    text-decoration: underline;
    /* 添加下划线 */
}
</style>